<template>
  <div class="rule-setting ">
    <div class="white-wrap top-opt clearFix  c-shadow">
      <el-form label-width="140px" :model="postData" ref="postData" :inline="true">
          <el-form-item label="预警模型：" prop="status" class="wid50" >
            <el-select v-model="postData.modelName" placeholder="请选择"  style="width: 320px;" @change="initModelList">
              <el-option v-for="item in modelOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户：" prop="status" class="wid50" v-if="postData.user === 'admin'">
            <el-select v-model="postData.userName" placeholder="请选择"  style="width: 320px;" @change="initModelList">
              <el-option v-for="item in userOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户：" prop="status" class="wid50" v-else>
            {{postData.user}}
          </el-form-item>
          <el-form-item label="当前模型风险类别：" prop="status" class="model-class">
             <span v-for="item in modelClass" :class="{sel:item.sel}"
                :key="item.name">{{item.name}}</span>
          </el-form-item>
          <el-form-item label="烽火值预警分值：" prop="status">
            <el-input v-model="inputGroup.score" placeholder="请输入内容"  type="number" max="100" min="0"  oninput="if(value>100)value=100;if(value<0)value=0;if(value.indexOf('.'))value=Math.floor(value)"></el-input>
            <div class="info">注意：请填入0到100的数值</div>
          </el-form-item>
        </el-form>
    </div>

    <div class="white-wrap top-opt clearFix  c-shadow">
      <el-form label-width="100px"  :inline="true" v-if="inputGroup.arr && inputGroup.arr.length !== 0">
        <template  v-for="(item,index) in inputGroup.arr">
        <h4 class="detail-base-title" :key="index">{{item.name}}</h4>
        <div class="box clearFix" :key="index">
            <div style="float:left;width:100%" v-for="(itemA,index) in item.value" :key="index">
              <div v-if="itemA.link" class="title">
                <el-form-item label="" style="width: 20%;text-align:center" v-for="link in itemA.link"  v-model="link.flag" :key="link.name">
                  <el-checkbox :label="link.name"></el-checkbox>
                </el-form-item>
              </div>
              <el-form-item label="" style="width: 160px;float:left;padding-right:40px">
                <el-checkbox v-model="itemA.flag">{{itemA.name}}</el-checkbox>
              </el-form-item>
              <div style="float:left;" :style="!itemB.name?'width:800px':''" v-for="(itemB,index) in itemA.value" :key="index">
                <el-form-item label="" style="width: 160px;padding-left:36px;float:left" v-if="itemB.name">
                  <el-checkbox  v-model="itemB.flag">{{itemB.name}}</el-checkbox>
                </el-form-item>
                <div style="float:left;"  v-for="(itemC,idx) in itemB.value" :style="idx>0&&itemB.name?'padding-left:206px':''" :key="idx">
                <el-form-item label="" style="width: 100px">
                  <el-select v-model="itemC[0][0]" placeholder="请选择">
                    <el-option
                      v-for="item in operatorOption"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" style="width: 100px">
                  <el-input placeholder="" v-model="itemC[0][1]" maxlength="4" minlength="0"></el-input>
                </el-form-item>
                <el-form-item label="" style="width: 100px">
                  <el-select v-model="itemC[0][2]" placeholder="请选择">
                    <el-option
                      v-for="item in conjunctionOption"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" style="width: 100px">
                  <el-select v-model="itemC[0][3]" placeholder="请选择"  :disabled="itemC[0][2]=='无'">
                    <el-option
                      v-for="item in operatorOption"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" style="width: 100px" :disabled="itemC[0][2]=='无'">
                  <el-input placeholder="" v-model="itemC[0][4]" maxlength="4" minlength="0"></el-input>
                </el-form-item>
                <el-form-item label="得分"  style="width: 200px">
                  <el-input placeholder="" v-model="itemC[1]" style="width: 100px" type="number" max="100" min="0"  oninput="if(value>100)value=100;if(value<0)value=0;if(value.indexOf('.'))value=Math.floor(value)"></el-input>
                </el-form-item>
                </div>

              </div>
            </div>
        </div>
        </template>
        <el-form-item class="submit">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
      <j-no-data :mode="'b'" msg="b" v-else></j-no-data>
    </div>
  </div>
</template>
<script>
import { sysManage as api } from '../../api'
import Axios from 'axios'
import { jNoData } from "../../components"
export default {
  data() {
    return {
      postData: {
        modelName: '',
        userName: '',
        score: '',
        user: this.$store.state.user.userInfo.realName
      },
      rules: '',
      curConfig: {},
      token: '',
      userOption: [],
      modelOption: [],
      operatorOption: [
        { value: '>', label: '>' },
        { value: '=', label: '=' },
        { value: '<', label: '<' },
        { value: '>=', label: '>=' },
        { value: '<=', label: '<=' }
      ],
      conjunctionOption: [
        { value: '且', label: '>' },
        { value: '或', label: '=' },
        { value: '无', label: '<' }
      ],
      modelClass: [
        { name: '经营风险', sel: false },
        { name: '舆情风险', sel: false },
        { name: '关联风险', sel: false },
        { name: '传播风险', sel: false }
      ],
      inputGroup: {}
    }
  },
  components: {
    jNoData
  },
  methods: {
    resetForm() {
      this.getModelName()
    },
    submitForm() {
      let params = { dataJson: JSON.stringify(this.inputGroup) }
      params.userName = this.postData.userName
      params.modelName = this.postData.modelName
      params.score = this.score
      api
        .postUpdateList(params)
        .then(res => {
          this.tips(res.msg, 'success')
        })
        .catch(res => {
          this.tips(res.msg, 'error')
        })
    },
    getUserName() {
      Axios.post(
        window.api_host + '/model/getUserName',
        this.curConfig
      ).then(res => {
        if (res.data.code === 1 && res.data.data) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.userOption.push({ value: res.data.data[i], label: res.data.data[i] })
          }
          this.postData.userName = res.data.data[0]
          this.initModelList()
        }
      }).catch(err => {
        this.tips(err.msg, 'error')
      })
    },
    getModelName() {
      Axios.post(
        window.api_host + '/model/geModelName',
        this.curConfig
      ).then(rtn => {
        if (rtn.data.code === 1) {
          console.log(rtn.data)
          for (let i = 0; i < rtn.data.data.length; i++) {
            this.modelOption.push({ value: rtn.data.data[i], label: rtn.data.data[i] })
          }
          this.postData.modelName = rtn.data.data[0]
          this.getUserName()
        }
      }).catch(err => {
        this.tips(err.msg, 'error')
      })
    },
    initModelList() {
      let params = {
        userName: this.postData.userName,
        modelName: this.postData.modelName
      }
      api
        .postModelList(params)
        .then(res => {
          this.inputGroup = res.data
        })
        .catch(res => {
          this.tips(res.msg, 'error')
        })
    }
  },
  mounted() {
    this.token = JSON.parse(sessionStorage.getItem('user')).token
    this.curConfig = {
      timeout: 600000,
      headers: {
        Authorization: this.token
      }
    }
    this.getModelName()
  }
}
</script>
<style lang="scss" scoped>
.rule-setting {
  .wid50 {
    width: 46%;
  }
  .white-wrap {
    padding: 20px;
    margin-bottom: 20px;
  }
  .model-class {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    span {
      padding: 5px 15px;
      margin: 0 30px 20px 0;
      background: #e2f1ff;
      color: #3cafff;
      border-radius: 5px;
      &.sel {
        background: #ffe5ce;
        color: #ff7200;
      }
    }
  }
  .info {
    position: absolute;
    top: 0;
    left: 110%;
    width: 300px;
    color: #666;
  }
  h4.detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0 15px 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 23px;
    background-repeat: no-repeat;
  }
  .box {
    border: solid 1px #3f8ffa;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .submit {
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
  .title {
    text-align: center;
    background: #f3f7fd;
    margin: -15px -15px 5px -15px;
    /deep/ .el-form-item__content {
      margin-bottom: 0px;
      height: 30px;
      line-height: 50px;
    }
  }
}
.el-input {
  width: 160px;
}
</style>



// WEBPACK FOOTER //
// src/view/sysManage/ruleSetting.vue